金魚都能懂的網頁切版：5

橫式版面

https://codepen.io/mikeyam/pen/JjXQwjV
首先，一樣在外層設定寬高，並使用flex 特性做水平置中

.wrap{
    height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(-30deg, #fdaecb, #e7597f, #fe8556);
}
.container{
    width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

box-shadow（x軸 ,y軸 ,模糊程度 ,色彩）
object-fit: cover;
（cover: 保持圖片比例並裁剪至適合的大小中）

.box{
    width: 400px;
    margin: 10px 15px;
    display: flex;
    background-color: rgba(255,255,255,.6);
    border: 1px solid #fff;
    box-shadow: 0 10px 30px rgba(160,0,0,.5);
    /* x軸 y軸 模糊程度 色彩 */
}
.box .pic{
    width: 50%;
}
.box .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

align-self 可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值
可參考 https://wcc723.github.io/css/2017/07/21/css-flex/
align-self: flex-end;

.text .btn{
    line-height: 1.5em;
    border: 1px solid #ccc;
    padding: 0 1em;
    text-decoration: none;
    align-self: flex-end;
    border-radius: 200px;
    margin-top: auto;
    color: #aaa;
}
.text .btn:hover{
    color: #fff;
    background-color: #ccc;
}

flex

flex 特性：flex item有自動等高特性（若子層沒設定高度，會跟父層高度相等）
flex 換行：flex wrap:wrap;
flex 垂直居中：以下

        .flex{
            width: 800px;
            height: 800px;
            background-color: #ccc;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 100px;
            margin: 20px;
        }

漸層色

background-image: linear-gradient(角度,色標,色標);
0deg => 由下往上
90deg =>由左往右
180deg =>由上往下
270deg =>由右往左

.box{
    width: 500px;
    height: 500px;
    background-color: #ccc;
    background-image: linear-gradient(0deg,red,yellow,blue);
}

三角形

用border製作出三角形

.box{
    width: 0px;
    height: 0px;
    border-top: 50px solid #f00 ;
    border-right: 50px solid #0f0 ;
    border-left: 50px solid #AAA ;
    border-bottom: 50px solid #00f ;
}

偽元素

用Css製作：
before製作出 p 前面資料
after製作出 p 後面資料

p{
    background-color: #ccc;
}
p::before{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;
}
p::after{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;
}